<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ include file="/WEB-INF/jsp/include/common.jsp"%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>결제하기</title>
	<script src="javaScript/order.js" charset='UTF-8'></script>
</head>

<body onload="totalAcount();">
	<form id='paymentform' action='<c:url value='/payment.do'/>' method='post'>
	<table width="100%" border=1>
		<tr>
			<td align="center" width=300>
				<%@ include file="/WEB-INF/jsp/include/logo.jsp"%>
			</td>
			<td align="center" bgcolor="#F5F5F5">
				<%@ include file="/WEB-INF/jsp/include/top_menu.jsp"%>
			</td>
		</tr>
		<tr>
			<!-- 메뉴 영역 -->
			<td valign="top" width=300>
				<%@ include file="/WEB-INF/jsp/include/left_menu.jsp"%>
			</td>		
			<td>
				<!-- 정보 입력 -->
				<table border=1 width=100%>
					<tr>
						<td>
							<input type="radio" name="chk" onclick="selectUserInfo('default_info', '${loginUser.name}', '${loginUser.phoneNum}', '${loginUser.address}');" checked="checked"/> 기본 정보 사용
							<input type="radio" name="chk" onclick="selectUserInfo('new_info');" /> 새로 입력
						</td>
					</tr>
					<tr>
						<td>
							<input type="text" size=30 placeholder="받는 분 이름" id="name" name="name" value="${loginUser.name}">
							<input type="text" size=50 placeholder="전화번호" id="phoneNum" name="phoneNum" value="${loginUser.phoneNum}">
						</td>
					</tr>
					<tr>
						<td width=100%>
							<input type="text" size=100 placeholder="주소" id="address" name="address" value="${loginUser.address}">
						</td>
					</tr>
				</table>
				
				<!-- 책 리스트 -->
				<table border=1 width=100%>
					<!-- 제목 -->
					<tr>
						<th>이미지</th>
						<th>도서명</th>
						<th>출판사</th>
						<th>작가</th>
						<th>가격</th>
						<th>수량</th>
					</tr>
					<c:forEach items="${books}" var="book" varStatus="loop">
						<tr align="center">
							<!-- 이미지 -->
							<td width=20%>
								<img src="${book.img}" />
							</td>
							<!-- 도서명 -->
							<td width=30%>
								<a href="<c:url value='/bookDetail.do?bookId=${book.bookId}'/>">
									${book.title}
								</a>
							</td>
							<!-- 출판사 -->
							<td width=10%>
								${book.publisher}
							</td>
							<!-- 작가 -->
							<td width=10%>
								${book.author}
							</td>
							<!-- 가격 -->
							<td width=15%>
								<input type="hidden" id="bookId" name="bookId" value="${book.bookId}">
								<input type="hidden" id="price" name="price" value="${book.price}">
								${book.price}
							</td>
							<!-- 수량 -->
							<td width=15%>
								<input type="text" size=5 value="1" id="count" name="count"  onchange="totalAcount();">
							</td>
						</tr>
					</c:forEach>
					<tr>
						<td colspan="4">
						</td>
						<!-- 주문 총합 -->
						<td align="center">
						 	<b id='totalAcount'></b>
						</td>							
						<td align="center">
						
							<input type="hidden" id="bookIds" name="bookIds">
							<input type="hidden" id="counts" name="counts">
							<input type="hidden" id="userId" name="userId" value="${loginUser.userId}">
							<input type="button" onclick="alert('주문수정 공사중');" value="주문수정" /><br>
							<input type="button" onclick="payment(document.getElementById('paymentform'));" value="결제하기" />
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	</form>
</body>
</html>